<template>
  <div class="wrapper">
    <div class="product-container">
      <div class="border">
        <div class="name">名称：</div>
        <div class="content">{{ info.package_name }}</div>
      </div>
      <!-- <div class="border">
        <div class="name">简介：</div>
        <div class="content">{{ info.package_intro }}</div>
      </div> -->
      <div class="border">
        <div class="name">商品logo：</div>
        <img :src="info.package_list_pic" preview="product" preview-text="商品图片" alt="" class="image">
      </div>
      <div class="border">
        <div class="name">商品轮播：</div>
        <img v-for="(item, index) of info.package_pics" :key="index" :src="item" preview="index" preview-text="轮播图片" alt="" class="image">
      </div>
      <div class="border">
        <div class="name">套餐价：</div>
        <div class="content">{{ info.package_price }}</div>
      </div>
      <div class="border">
        <div class="name">门市价：</div>
        <div class="content">{{ info.market_price }}</div>
      </div>
      <div class="border">
        <div class="name">默认库存：</div>
        <div class="content">{{ info.stock_quantity }}</div>
      </div>
      <div class="border">
        <div class="name">排序：</div>
        <div class="content">{{ info.seller_sort }}</div>
      </div>
      <div class="border">
        <div class="name">标签：</div>
        <div class="content">{{ info.tag }}</div>
      </div>
      <div class="border">
        <div class="name">审核</div>
        <el-tag v-if="info.is_auth === 0" type="warning">待审核</el-tag>
        <el-tag v-if="info.is_auth === 1" type="success">通过</el-tag>
        <el-tag v-if="info.is_auth === 2" type="error">拒绝</el-tag>
      </div>
      <div class="border">
        <div class="name">审核时间：</div>
        <div class="content">{{ info.auth_at }}</div>
      </div>
      <div class="border">
        <div class="name">拒绝理由：</div>
        <div class="content">{{ info.refusal_reason }}</div>
      </div>
      <div class="border">
        <div class="name">状态：</div>
        <el-tag v-if="info.status === 1" type="success">上架</el-tag>
        <el-tag v-if="info.status === 0" type="warning">下架</el-tag>
      </div>
      <div class="border">
        <div class="name">更新时间：</div>
        <div class="content">{{ info.update_at }}</div>
      </div>
      <div class="border">
        <div class="name">新增时间：</div>
        <div class="content">{{ info.create_at }}</div>
      </div>
    </div>
    <el-button type="primary" @click="handleBack">返回</el-button>
  </div>
</template>
<script>
import { detail, getTagList } from '@/api/combo'
import { parseTime } from '@/utils'
export default {
  name: 'HotelDetail',
  data() {
    return {
      info: {},
      content: '',
      status: true
    }
  },
  created() {
    this.initDetail()
  },
  methods: {
    async initDetail() {
      const { id } = this.$route.query
      const res = await detail({ package_id: id })
      const tagList = await this.getTag()
      const params = res.data.package
      const index = tagList.findIndex((item) => {
        return params.tag_id === item.id
      })
      params.tag = index > -1 ? tagList[index].tag_name : ''
      params.auth_at = params.auth_at ? parseTime(params.auth_at) : ''
      params.create_at = params.create_at ? parseTime(params.create_at) : ''
      params.update_at = params.update_at ? parseTime(params.update_at) : ''
      this.info = params
      this.$previewRefresh()
    },
    async getTag() {
      const res = await getTagList()
      const tagList = res.data.lists
      return tagList
    },
    handleBack() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 0;
  right: 0;
  z-index: 10;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  .title{
    font-size: 20px;
    line-height: 50px;
  }
  .product-container, .user-container, .administrator-container {
    width: 100%;
    border-top: 1px solid #ebeef5;
    box-sizing: border-box;
    margin-bottom: 20px;
    .border {
      padding: 10px 0;
      border: 1px solid #ebeef5;
      border-top: none;
      width: 100%;
      display: flex;
      align-items: center;
      min-height: 50px;
      box-sizing: border-box;
      .name {
        margin-left: 20px;
        margin-right: 15px;
        min-width: 100px;
      }
      .content {
        line-height: 30px;
      }
      .image-wrap {
        display: flex;
      }
      .image{
        width: 80px;
        height: 80px;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  textarea{
    width: 50%;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    color: #050505;
    line-height: 28px;
    border: 1px solid #ebeef5;
    margin-bottom: 10px;
    resize: none;
    outline: none;
  }
  button {
    width: 200px;
  }
}
</style>
